<!DOCTYPE HTML>
<html style="width:100%;height:100%;">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>addmovement</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/font-awesome.css" />
</head>
<style>
    .label_15 {
        width: 15% !important;
    }

    .badge_Al {
        width: 1.1rem;
        height: 1.1rem;
        position: absolute;
        top: 0.3rem;
        right: 0.95rem;
        border-radius: 50%;
    }

    .bottom1 {
        width: 100%;
        height: 2rem;
        border-top: 0.05rem solid #ddd;
        text-align: center;
        border-bottom: 0.05rem solid #ddd;
        position: fixed;
        bottom: 0rem;
    }

    .bottomitem {
        width: 50%;
        height: 100%;
        float: left;
        display: flex;
        /* text-align: center; */
        align-items: center;
        justify-content: center;
    }

    .icon {
        width: 1.4rem;
        height: 1.4rem;
        /* display: inline !important; */
    }
</style>

<body style="background-color:#FFF;width:100%;height:100%">
    <header class="aui-bar aui-bar-nav" style="background-color:#ffffff;height:2.5rem;padding-top:0.8rem">
        <a class="aui-pull-left aui-btn " style="color:#C62F2F" onclick="api.closeWin()">
            <span style="padding-left:0.5rem;padding-right:0.5rem">取消</span>
        </a>
        <div class="aui-title" style="color:#000000">添加活动</div>
        <a class="aui-pull-right" style="color:#C62F2F" @click="baocun()">
            <span style="padding-left:0.5rem;padding-right:0.5rem">保存</span>
        </a>
    </header>

    <div class="aui-content">
        <ul class="aui-list aui-form-list">
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label label_15">
                        主题
                    </div>
                    <div class="aui-list-item-input">
                        <input type="text" v-model="zhuti">
                        <!-- {{zhuti}} -->
                    </div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label label_15">
                        类型
                    </div>
                    <div class="aui-list-item-input">
                        <select v-model="temp">
                            <option v-for="item in type" value='{{item.activiOid}}'>{{item.activitype}}</option>
                        </select>
                    </div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label label_15">
                        日期
                    </div>

                    <div class="aui-list-item-input">
                        <input readonly type="text" @click="setData()" v-model="ctime">
                    </div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-input">
                        <textarea placeholder="这一刻的想法" v-model="info" abled></textarea>
                    </div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label label_14" style="width:22%">
                        视频:
                    </div>
                    <div class="aui-list-item-input" style="width:78%">
                        <input readonly type="text" v-model="videoName">
                    </div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label">
                        {{iftui}}
                    </div>
                    <div class="aui-list-item-input">
                        <input type="checkbox" class="aui-switch" v-model="tuitype">
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="aui-bar" style="padding-top:0.5rem;padding-bottom:0.5rem;background-color:rgb(249,249,251)">
        <div>添加图片</div>

        <div class="aui-row-padded">
            <div v-for="item in imageList" track-by="$index" class="aui-col-xs-4" style="display:flex;align-items: center;justify-content: center;height:6.5rem;position:relative;">
                <image style="width:80%;height:100%;" :src="item.thumbPath">
                    <div class="badge_Al" @click="deleteimg($enent,$index)">
                        <img src="../image/cha.png" alt="" width="100%" height="100%">
                    </div>
                </image>
            </div>
            <div v-if="imageList.length <3" class="aui-col-xs-4" style="display:flex;align-items: center;justify-content: center;height:6.5rem;">
                <div style="width:80%;height:100%;border:0.05rem solid #c5c5c5" @click="addimage">
                    <image style="width:100%;height:100%;" src="../image/addimage.png"></image>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom1">
        <div class="bottomitem" @click="addimage()" style="border-right:0.05rem solid #C8C9C9">
            <image class="icon" src="../icon/picture.png">
                <span style="margin: auto 0;padding-left: 0.25rem ;">
                    <div>添加图片</div>
                </span>
            </image>
        </div>
        <div class="bottomitem" @click="addVideo()">
            <image class="icon" src="../icon/filmstrip.png">
                <span style="margin: auto 0;padding-left: 0.25rem ;">
                    <div>添加视频</div>
                </span>
            </image>
        </div>
    </div>

</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/vue1.0.js"></script>
<script type="text/javascript" src="../script/util.js"></script>
<script type="text/javascript">
    var date = new Date().format("yyyy-MM-dd");
    apiready = function () {
        var UIAlbumBrowser = api.require('UIAlbumBrowser');
        vm = new Vue({
            el: "body",
            data: {
                array: [1, 2, 3, 4, 5, 6, 7, 8],
                imageList: [],
                type: [],
                videoPath: "",
                zhuti: "",
                ctime: date,
                temp: "",
                info: "",
                userId: "",
                file: "",
                videoName: "",
                iftui: "不推荐",
                tuitype: "",
                recommend: 0
            },
            created: function () {
                var me = this;
                $api.get(serverIp + "/friend/activitytypeActivity.do", function (ret) {
                    if (ret) {
                        // console.log(JSON.stringify(ret));
                        me.type = ret;
                    }
                }, 'JSON');

            },
            watch: {
                tuitype: function (val) {
                    var me = this;
                    me.recommend = me.tuitype ? 1 : 0;
                    // if(me.tuitype){
                    //     me.recommend=1; 
                    // }
                    me.iftui = me.tuitype ? "推荐" : "不推荐";
                    console.log(me.recommend);
                }
            },
            methods: {
                setData: function () {
                    var me = this;
                    api.openPicker({
                        type: "date_time",
                        date: date
                    }, function (ret) {
                        var year = ret.year;
                        var month = ret.month;
                        var day = ret.day;
                        if (month < 10) {
                            month = '0' + month;
                        }
                        if (day < 10) {
                            day = '0' + day;
                        }
                        me.ctime = year + "-" + month + "-" + day;
                        // console.log(me.ctime);
                    });
                },
                addimage: function () {
                    var me = this;
                    api.actionSheet({
                        cancelTitle: '取消',
                        destructiveTitle: '从相机获取图片',
                        buttons: ['从相册获取图片']
                    }, function (ret, err) {
                        if (ret.buttonIndex == 1) {
                            me.takePic();
                        } else if (ret.buttonIndex == 2) {
                            me.selectImage();
                        }
                    });
                },
                addVideo: function () {
                    var me = this;
                    api.actionSheet({
                        cancelTitle: '取消',
                        destructiveTitle: '从相机获取视频',
                        buttons: ['从相册获取视频']
                    }, function (ret, err) {
                        if (ret.buttonIndex == 1) {
                            me.recordVideo();
                        } else if (ret.buttonIndex == 2) {
                            me.selectVideo();
                        }
                    });
                },
                selectImage: function () {

                    var me = this;
                    api.clearCache();
                    UIAlbumBrowser.open({
                        max: 3,
                        type: "image",
                        styles: {
                            bg: '#fff',
                            mark: {
                                icon: '',
                                position: 'bottom_right',
                                size: 30
                            },
                            nav: {
                                bg: 'rgba(0,0,0,0.6)',
                                titleColor: '#fff',
                                titleSize: 18,
                                cancelColor: '#fff',
                                cancelSize: 16,
                                finishColor: '#fff',
                                finishSize: 16
                            },
                            thumbnail: { //（可选项）返回的缩略图配置，**建议本图片不要设置过大** 若已有缩略图，则使用已有的缩略图。若要重新生成缩略图，可先调用清除缓存接口api.clearCache()。  
                                // w: 500,     //（可选项）数字类型；返回的缩略图的宽；默认：原图的宽度
                                // h: 550      //（可选项）数字类型；返回的缩略图的宽；默认：原图的高度
                            }
                        },
                        rotation: false
                    }, function (ret) {
                        if (ret) {
                            api.showProgress({
                                title: '图片压缩加载中...',
                                text: '先喝杯茶...',
                                modal: false
                            });
                            if (ret.eventType == "confirm") {
                                yasuo(ret.list.length - 1, ret.list);
                            }
                            api.hideProgress();
                        }

                    });
                },
                recordVideo: function () {
                    var me = this;
                    api.getPicture({
                        sourceType: 'camera',
                        mediaValue: 'video',
                        destinationType: 'url',
                        allowEdit: true,
                        quality: 50,
                        videoQuality: "medium",
                        saveToPhotoAlbum: false
                    }, function (ret, err) {
                        if (ret) {
                            me.videoPath = ret.data;
                            var temp = ret.data.split('/');
                            me.videoName = temp[temp.length - 1];
                        }
                    });
                },
                takePic: function () {
                    var me = this;

                    api.getPicture({
                        sourceType: 'camera',
                        encodingType: 'jpg',
                        mediaValue: 'pic',
                        destinationType: 'url',
                        allowEdit: true,
                        targetHeight: 1000,
                        quality: 70,
                        saveToPhotoAlbum: false
                    }, function (ret, err) {
                        if (ret.data != "") {
                            var json = {
                                "thumbPath": "",
                                "path": ""
                            }
                            json.thumbPath = ret.data;
                            json.path = ret.data;
                            var list = [];
                            list.push(json);
                            yasuo(list.length - 1, list);

                            // me.imageList.push(json);
                        }

                    })


                },
                selectVideo: function () {
                    var me = this;
                    UIAlbumBrowser.open({
                        max: 1,
                        type: "video",
                        styles: {
                            bg: '#fff',
                            mark: {
                                icon: '',
                                position: 'bottom_right',
                                size: 30
                            },
                            nav: {
                                bg: 'rgba(0,0,0,0.6)',
                                titleColor: '#fff',
                                titleSize: 18,
                                cancelColor: '#fff',
                                cancelSize: 16,
                                finishColor: '#fff',
                                finishSize: 16
                            }
                        },
                        rotation: false
                    }, function (ret) {
                        if (ret) {
                            if (ret.eventType == "confirm") {
                                me.videoPath = ret.list[0].Path;
                                var temp = ret.list[0].Path.split('/');
                                me.videoName = temp[temp.length - 1];
                            }
                        }
                    });
                },
                baocun: function () {
                    var me = this;
                    var files = [];
                    console.log(me.recommend);
                    for (index in me.imageList) {
                        files.push(me.imageList[index].path);
                    }
                    if (me.videoPath != "") {
                        files.push(me.videoPath);
                    }
                    var user = api.getPrefs({
                        key: 'user',
                        sync: true
                    });

                    var USER = JSON.parse(user);
                    if (me.imageList.length <= 0) {
                        alert("请上传图片！");
                    } else if (isNull(me.zhuti)) {
                        alert("请上传主题！");
                    } else if (isNull(me.temp)) {
                        alert("请选择活动类型")
                    } else {
                        api.showProgress({
                            title: '努力上传中...',
                            text: '先喝杯茶...',
                            modal: true
                        });
                        api.ajax({
                            url: serverIp + '/saveActivity',
                            method: 'post',
                            timeout: 5,
                            data: {
                                values: {
                                    zhuti: me.zhuti,
                                    ctime: me.ctime,
                                    temp: me.temp,
                                    info: me.info,
                                    userId: USER.userId,
                                    recommend: me.recommend
                                },
                                files: {
                                    file: files
                                }
                            }
                        }, function (ret, err) {
                            // console.log(JSON.stringify(err));
                            if (ret) {
                                if (ret.success) {
                                    api.hideProgress();
                                    api.alert({
                                        title: '提示',
                                        msg: '保存成功',
                                    }, function (ret, err) {
                                        api.closeWin();
                                    });
                                } else {
                                    alert(err);
                                }
                            } else {
                                api.alert({
                                    title: '提示',
                                    msg: "网络请求超时，请稍后重试",
                                }, function (ret, err) {
                                    api.hideProgress();
                                });
                            }

                        });
                    }
                },
                deleteimg: function (ev, index) {
                    this.imageList.splice(index, 1);
                }
            }
        })
    };


    function yasuo(index, list) {
        var imageFilter = api.require('imageFilter');
        var target_h = 1000;
        var name = "tmp" + Date.now() + ".jpg";
        if (index < 0) {
            return;
        }
        imageFilter.getAttr({
            path: list[index].thumbPath
        }, function (ret, err) {
            if (ret.status) {
                if (ret.height < target_h) {
                    target_h = ret.height;
                }
                var original_w = ret.width;
                var original_h = ret.height;
                var scale = original_h / target_h;
                var target_w = Math.round(original_w / scale);
                imageFilter.compress({
                    img: list[index].thumbPath,
                    quality: 1,
                    isClarityimg: false,
                    size: {
                        w: target_w,
                        h: target_h
                    },
                    save: {
                        imgPath: "fs://compress",
                        imgName: name
                    }
                }, function (ret, err) {
                    if (ret.status) {
                        var path = api.fsDir + "/compress/" + name;
                        var temppath = {
                            path: "",
                            thumbPath: ""
                        };
                        temppath.path = path;
                        temppath.thumbPath = path;
                        vm.imageList.push(temppath)
                        yasuo(--index, list);
                    };
                });
            }
        })
    }
    //判断字符串是否为空
    function isNull(str) {
        if (str == "") return true;
        var regu = "^[ ]+$";
        var re = new RegExp(regu);
        return re.test(str);
    }
</script>

</html>